<template>
  <div>
    <!-- <div class="search-top"></div> -->
    <van-search
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
      class="search-sou"
    >
      <template #action>
        <div style="font-size: 20px">
          <van-icon name="location-o" color="#fff" />
        </div>
      </template>
    </van-search>
    <!-- 地区选择 -->
    <van-dropdown-menu>
      <van-dropdown-item>
        <!-- <van-area :area-list="areaList" show-toolbar:false /> -->
        <van-picker show-toolbar title="标题" :columns="columns" />
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 查询房屋 -->
    <div class="searchitm">
      <div>
        <ul>
          <li v-for="item in lists" :key="item.id">
            <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="" />
            <div class="wenzi">
              <h4>{{ item.title }}</h4>
              <p class="dec">{{ item.desc }}</p>
              <p class="tags">{{ item.tags[0] }}</p>
              <p class="price">{{ item.price }} <span>元/月</span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import { areaList } from "@vant/area-data";
import { SearchHousesApi } from "@/api";
export default {
  data() {
    // return { areaList };
    return {
      columns: [
        {
          text: "浙江",
          children: [
            {
              text: "杭州",
              children: [{ text: "西湖区" }, { text: "余杭区" }],
            },
            {
              text: "温州",
              children: [{ text: "鹿城区" }, { text: "瓯海区" }],
            },
          ],
        },
      ],
      lists: [],
    };
  },
  mounted() {
    this.getSearchHouses();
  },
  methods: {
    async getSearchHouses() {
      try {
        const res = await SearchHousesApi();
        this.lists = res.data.body.list;
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
<style>
.search-sou {
  background-color: green;
}
.searchitm {
  padding-left: 10px;
  padding-right: 10px;
}
.searchitm li {
  display: flex;
  height: 120px;
  height: 120px;
  left: 0px;
  /* position: absolute; */
  top: 0px;
  width: 100%;
}

.searchitm li img {
  width: 106px;
  height: 80px;
}
.searchitm li .wenzi {
  margin-left: 10px;
}
.searchitm li .dec {
  font-size: 12px;
  color: #ccc;
}
.searchitm li .tags {
  display: inline-block;
  color: #39becd;
  background-color: #e1f5f8;
}
.searchitm li .price {
  font-size: 16px;
  color: #fa5741;
  font-weight: 700;
}
.searchitm li .price span {
  font-size: 16px;
  color: #fa5741;
}
</style>
